Bun Bundler

BunのJSのBundler

高速

https://gyazo.com/e0389ae55c5018cdd9f25afd4a2ca124 https://bun.sh/blog/bun-bundler

The Bun Bundler | Bun Blog

#wip

最小構成だと割と元の見た目を保ってくれるの良いなmrsekut.icon

todos

buildするときにimport.meta.vitest消してほしい

古いバージョン向けのjsへ変換する方法がわからん

これってtsconfig見てるの？

GPT-4.icon

Bun.build()を最小限で使う方法は以下のようになります。

最小構成の例

code:_

project/

├── src/

│ └── index.ts

├── build.ts

└── bunfig.toml （なくてもOK）

code:src/index.ts

console.log("Hello from Bun bundler!");

code:build.ts

await Bun.build({

entrypoints: "./src/index.ts", // 必須：エントリーファイル

outdir: "./dist", // 出力先フォルダ

});

3. 実行方法

$ bun run build.ts

λ bun buildでも良い

$ bun build ./src/index.ts --outdir ./dist

✨ よく使うオプション（必要に応じて追加）

table:_

オプション意味

minify: true 最小化（圧縮）

sourcemap: "external" ソースマップ出力

target: "bun" 実行対象をBunに最適化（Node.js互換コードなど）

例：

code:ts

await Bun.build({

entrypoints: "./src/index.ts",

outdir: "./dist",

minify: true,

sourcemap: "external",

target: "browser",

});

3. 分かりやすいAPI

code:ts

await Bun.build({

entrypoints: './src/index.tsx',

outdir: './build',

minify: true,

sourcemap: 'external',

});

entrypoints は必須。

target により出力の環境（browser/bun/node）を切替可能。

minify, sourcemap, plugins, loader など細かい制御も可能。

🧩 プラグイン

BunPluginを使用可能

code:ts

import YamlPlugin from "bun-plugin-yaml";

const plugin = YamlPlugin();

Bun.plugin(plugin);

await Bun.build({ plugins: plugin, ... });

🌲 Tree Shaking & Minify

Tree shaking：未使用コードを削除（sideEffects, PURE コメントに対応）。

Minify：minify: trueで、識別子短縮、空白除去、定数のインライン展開など。

🧪 Source Map

sourcemap: "inline" or "external" により、デバッグ用のsourcemap出力も簡単。

🧠 今後：Bun.Appの展望

Bun.App() という新しい統合APIが予定されており、バンドル＋HTTPルーティング＋ファイルサーバが統一的に記述できるようになる構想。

code:ts

new Bun.App({

bundlers: name: "static-server", outdir: "./out" },

routers: mode: "static", dir: "./public", build: "static-server" }

});